<template>
  <div>
    <div>
      <van-nav-bar title="我的资料" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
    </div>
    <div class="container">
      <div class="phto">
        <van-image
          round
          width="3rem"
          height="3rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          class="pho"
        />
      </div>
      <div>
        <van-cell title="昵称" is-link url :value="name" />
        <van-cell title="性别" is-link to :value="age" @click="sex" type="primary" />
        <van-popup v-model="sexy" position="bottom" :style="{ height: '30%' }">
          <van-picker :columns="columns" @change="onChange" />
        </van-popup>
        <!-- <van-popup v-model="birthday" position="bottom" :style="{ height: '20%' }">
          <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" />
        </van-popup> -->
        <van-cell title="生日" :value="date" type="primary" />
        <van-cell title="简介" value="暂无简介" />
      </div>
      <div class="dz">
        <van-cell title="我的地址" is-link to="/addr" />
        <van-cell title="收款账户" is-link to />
      </div>
      <div>
        <van-cell title="第三方绑定" is-link to="/bind" />
        <!-- <van-cell title="修改密码" is-link to="/newpsw" />
        <van-cell title="修改手机号" is-link to="/newphone" /> -->
      </div>
      <van-cell title="退出登录" :clickable="true" class="out" @click="logout"/>
      <div class="row" id="mokuang"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "usermessage",
  data() {
    return {
      columns: ['男', '女'],
      sexy: false,
      title: "我的资料",
      age:'',
      date:'',
      name:''
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    sex() {
      this.sexy = true;
    },
    onChange(picker, value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`);
      picker.getColumnValue(0)
      console.log(picker.getColumnValue(0));
      this.age=picker.getColumnValue(0)

    },
    logout(){
      if(localStorage.getItem('access-user')){
        localStorage.removeItem('access-user')
        localStorage.removeItem('username')
        this.$router.push('/login')
      }
    }
  },
  mounted() {
    let token = JSON.parse(localStorage.getItem('access-user'));
    console.log(token);
    this.name =token.data.username;
    this.date = token.data.birthday;
    this.age = token.data.sex;
    console.log(name);
    this.$emit("toparent", this.title);


    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f7f7f7");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
};
</script>

<style scoped>
body {
  background: rgb(235, 229, 229);
}
.phto {
  height: 135px;
}
.pho {
  margin: 10px 0 0 114px;
}
.dz {
  margin: 8px 0 8px 0;
}
.out {
  margin-top: 8px;
  text-align: center;
}
.container {
  margin-top: 46px;
}
</style>
